<template>
  <div class="like">
    <Navi title="我的收藏" :fixed="true" />
    <div class="product-box">
      <div
        class="pro-item"
        v-for="(item, index) in productData"
        :key="index"
        @click="viewProductDetail(item.pid)"
      >
        <Product
          :pro="item"
          :is-remove="true"
          @remove="removeProduct(item.pid, index)"
        />
      </div>
    </div>

    <div v-if="productData.length === 0">
      <van-empty description="您还没有收藏了的商品!" />
    </div>
  </div>
</template>

<script>
import Navi from "../components/Navi.vue";
import Product from "../components/Product.vue";
export default {
  name: "Like",
  components: {
    Navi,
    Product,
  },

  data() {
    return {
      productData: [],
    };
  },

  created() {
    this.getLikeData();
  },

  methods: {
    getLikeData() {
      this.axios({
        method: "get",
        url: "/findAllLike",
      })
        .then((result) => {
          if (result.data.code === 700) {
            this.$toast(result.data.msg);
            this.$router.push({ name: "Login" });
            return;
          }

          if (result.data.code === 2000) {
            this.productData = result.data.result;
          }
        })
        .catch((err) => {
        });
    },

    viewProductDetail(pid) {
      this.$router.push({ name: "Detail", params: { pid } });
    },

    removeProduct(pid, index) {
      this.axios({
        method: "post",
        url: "/notlike",
        data: {
          pid,
        },
      })
        .then((result) => {
          if (result.data.code === 700) {
            this.$toast(result.data.msg);
            this.$router.push({ name: "Login" });
            return;
          }

          if (result.data.code === 900 && result.data.result === 1) {
            this.$toast("删除成功");
            this.productData.splice(index, 1);
          } else {
            this.$toast("删除失败");
          }
        })
        .catch((err) => {
        });
    },
  },
};
</script>

<style lang="less" scoped>
.like {
  background-color: #f5f5f5;
  .pro-item {
    background-color: #fff;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
  }
  /deep/ .product-price{
      margin-top: 30px;
  }
}
.product-box {
  padding-top: 46px;
}

.pro-info{
    position: relative;
}
</style>